$height: 40px;

@mixin map-control {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
}

@mixin button {
  height: 40px;
  cursor: pointer;
  &:hover {
    background: rgb(235, 235, 235);
  }
}

@mixin button-tiered {
  @include button();

  &.button-primary {
    background-color: #1a73e8;
    color: white;
    &:hover {
      background-color: #1765cc;
    }
  }
  &.button-secondary {
    background-color: white;
    color: #1a73e8;
    &:hover {
      background-color: #d2e3fc;
    }
  }
}

@mixin map-control-button {
  @include map-control();
  @include button();
}

@mixin map-control-button-tiered {
  @include map-control();
  @include button-tiered();
}
